<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>Milano | Interactive Responsive HTML5 Template</title>
	<link rel="shortcut icon" href="favicon.ico">

	<!-- Add your CSS files here -->
	<link rel="stylesheet" href="css/normalize.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/prettyPhoto.css">
	<link rel="stylesheet" href="css/themes/green.css">

	<!-- Add your Fonts here -->
	<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

</head>
<body>

<a href="http://themeforest.net/item/milano-interactive-responsive-html5-template/5110008" title="Get this Theme" class="badge">Get this Theme</a>

<div class="settings">
	<a href="#" class="icon-cog"></a>
	<span class="themes">
		<a href="#" class="theme" data-color="red">Theme Red</a>
		<a href="#" class="theme" data-color="green">Theme Green</a>
		<a href="#" class="theme" data-color="blue">Theme Blue</a>
		<a href="#" class="theme" data-color="white">Theme White</a>
		<a href="#" class="theme" data-color="rose">Rose Color</a>
		<a href="#" class="theme" data-color="aqua">Aqua Color</a>
		<a href="#" class="theme" data-color="orange">Orange Color</a>
	</span>
</div>

<div class="container">

	<div class="logo"><img src="img/logo.svg" alt="Logo"></div>

	<div class="social">
		<a href="http://facebook.com/rocketthemes" class="icon-facebook" title="Facebook"></a>
		<a href="http://twitter.com/rocketthemes" class="icon-twitter" title="Twitter"></a>
		<a href="#" class="icon-googleplus" title="Googleplus"></a>
		<a href="#" class="icon-dribbble" title="Dribbble"></a>
		<a href="#" class="icon-behance" title="Behance"></a>
		<a href="#" class="icon-instagram" title="Instagram"></a>
		<a href="#" class="icon-flickr" title="Flickr"></a>
	</div>
	<!-- Social Icons End -->

	<header>
		<nav id="nav">
			<ul class="nav">
				<li><img src="img/logo.svg" alt="My Logo"></li>
				<li><a href="index.html" class="icon-user"><span>Profile</span></a></li>
				<li class="active"><a href="work.html" class="icon-briefcase"><span>Work</span></a></li>
				<li><a href="resume.html" class="icon-list"><span>Resume</span></a></li>
				<li><a href="contact.html" class="icon-mail"><span>Contact</span></a></li>
			</ul>
		</nav>
	</header>
	<!-- Header End -->

	<section class="content">
		<article class="s-project">
			<h2>Facebook Redesign Concept</h2>
			<div class="project-nav">
				<a href="project-2.html" class="icon-arrow-left-5" title="Previous Project"></a>
				<a href="work.html" class="icon-layout" title="All Projects"></a>
				<a href="project-1.html" class="icon-arrow-right-5" title="Next Project"></a>
			</div>

			<div class="details">

				<div>
					<h4>Project Description</h4>
					<p>Quas facere porro architecto ducimus sequi a vero error aliquam dolorum quidem minus nihil harum quae optio rem culpa fugiat reiciendis impedit modi cum quisquam dolorem assumenda ipsa voluptate unde! Architecto, accusantium, veritatis optio quod delectus velit necessitatibus dolore error deleniti reiciendis soluta vitae. Porro, praesentium, eum, alias, expedita dolorem enim voluptates consectetur ad esse consequatur odio quas quis et deleniti excepturi at dolores aliquam quaerat!</p>
				</div>

				<ul>
					<li>
						<h4>Client</h4>
						<p>Personal Promotion Project</p>
					</li>
					<li>
						<h4>Year</h4>
						<p>2013</p>
					</li>
					<li>
						<h4>Order</h4>
						<p>Web Design</p>
					</li>
				</ul>
			</div>

			<ul class="ro-gallery clearfix">
				<li><a href="img/work/design/1.jpg" data-rel="prettyPhoto[gallery2]" title="How is the description on that one? How is the description on that one? How is the description on that one? "><img src="img/work/design/1.jpg" alt="This is a pretty long title" /></a></li>
				<li><a href="img/work/design/2.jpg" data-rel="prettyPhoto[gallery2]" title="Description on a single line."><img src="img/work/design/2.jpg" alt="" /></a></li>
				<li><a href="http://youtu.be/kh29_SERH0Y?rel=0" data-rel="prettyPhoto[gallery2]" title="YouTube demo"><img src="img/work/design/3.jpg" alt="" /></a></li>
				<li><a href="img/work/design/4.jpg" data-rel="prettyPhoto[gallery2]"><img src="img/work/design/4.jpg" alt="" /></a></li>
				<li><a href="img/work/design/5.jpg" data-rel="prettyPhoto[gallery2]"><img src="img/work/design/5.jpg" alt="" /></a></li>
				<li><a href="img/work/design/6.jpg" data-rel="prettyPhoto[gallery2]"><img src="img/work/design/6.jpg" alt="" /></a></li>
				<li><a href="http://vimeo.com/7874398&amp;width=700" data-rel="prettyPhoto[gallery2]" title="Vimeo video"><img src="img/work/design/7.jpg" alt="This is my Video description!"/></a></li>
			</ul>
			<!-- Gallery End -->

		</article>

	</section>
	<!-- Content End -->

</div>
<!-- Container End -->

<!-- Add your scripts here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>

<script>
	var navigation = responsiveNav("#nav", {
		animate: true,        // Boolean: Use CSS3 transitions, true or false
		transition: 400,      // Integer: Speed of the transition, in milliseconds
		label: "",            // String: Label for the navigation toggle
		insert: "before",     // String: Insert the toggle before or after the navigation
		customToggle: "",     // Selector: Specify the ID of a custom toggle
		openPos: "relative",  // String: Position of the opened nav, relative or static
		jsClass: "js",        // String: 'JS enabled' class which is added to <html> el
		init: function(){},   // Function: Init callback
		open: function(){},   // Function: Open callback
		close: function(){}   // Function: Close callback
	});

    // PrettyPhoto Lightbox Gallery
	$('.ro-gallery').find('a[data-rel^="prettyPhoto"]').prettyPhoto({});

</script>

</body>
</html>